<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import { getStockNews } from '../api/api'
import { getTime1, sortHourAndMinute, groupSortByDate } from '../utils/timeUtil'
import { WarnTriangleFilled, InfoFilled } from '@element-plus/icons-vue'
import useWebSocket from '../utils/websocket'
import { v4 as uuidv4 } from 'uuid'
const wsOptions = {
  url: 'ws://42.194.134.80/socket/ws/' + uuidv4(),
}
const { open, close, reconnect, on, send } = useWebSocket(wsOptions)

/* 说明 */
//如果要加入websocket，从websocket取出数据后的操作如下
//1.新数据存入 messages 变量中
//2.使用handleAndSortByTime()方法处理时间字段(传入messages.value,最后返回的值也赋值给messages.value)
//3.然后使用groupSortByDate()方法根据日期进行数组切割(传入messages.value,返回给processed_data.value)
//3.这样就行了，数据更新后页面会同步更新

// 这个字段存储数据(换websocket就往这里面村)
const messages = ref([])

//日期划分后数据
const processed_data = ref([])

//滚动外壳对象
const securities_news_scroll_container = ref(null)

//对时间字段进行排序
const handleAndSortByTime = (data) => {
  let temp_data = getTime1(messages.value)
  return temp_data
}

//websocket初始化操作
const initWebsocket = async () => {
  open()
  // 注册消息接收处理函数
  on('message', (data) => {
    if (data.type === 'update_news') {
      let temp_data = JSON.parse(data.message)

      temp_data=processData(temp_data)
      //处理数据(时间)
      for (let i = 0; i < temp_data.length; i++) {
        if (
          temp_data[i].time.substring(0, 13) ===
          processed_data.value[0][0].time.substring(0, 13)
        ) {
          processed_data.value[0].unshift(temp_data[i])
        } else {
          processed_data.value.unshift([temp_data[i]])
        }
      }
      securities_news_scroll_container.value.scrollTop = 0
    }
  })
}

//数据处理（去除开头和结尾的符号）（仅针对传入的data的data.title）
const processData = (data) => {
  for (let i = 0; i < data.length; i++) {
    data[i].title = data[i].title.slice(1)
    data[i].title = data[i].title.slice(0, -1)
  }
  return data
}

onMounted(async () => {
  let temp_data = await getStockNews()
  messages.value = temp_data.data.data
  messages.value = handleAndSortByTime(messages.value)
  //数据处理
  messages.value = processData(messages.value)
  //根据日期分类数据
  processed_data.value = groupSortByDate(messages.value)

  await initWebsocket()
})
onUnmounted(() => {
  close()
})
</script>

<template>
  <div class="card">
    <div class="card_content">
      <div class="card_title">
        <span>证券快讯</span>
      </div>
      <ul class="stock_news_ul" ref="securities_news_scroll_container">
        <div v-for="data_array in processed_data" :key="data_array">
          <span class="date_title"
            >{{ data_array[0].time.substring(0, 14) }}00</span
          >
          <li :class="item.type" v-for="item in data_array" :key="item">
            <div class="news_icon">
              <el-icon
                v-show="item.type === 'tips'"
                size="35px"
                style="color: #e4262d"
              >
                <WarnTriangleFilled />
              </el-icon>
              <el-icon
                v-show="item.type === 'info'"
                size="30px"
                style="color: #636772"
              >
                <InfoFilled />
              </el-icon>
            </div>
            <div class="news_content">
              <span class="news_time">{{ item.time.substring(11, 17) }}</span>
              <span>{{ item.title }}</span>
            </div>
          </li>
        </div>
      </ul>
    </div>
    <div class="card_background">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</template>

<style scoped>
.card {
  width: 98%;
  height: 97.5%;
  margin: 1%;
  margin-top: 3%;
}

.title {
  text-align: center;
  /* 文字水平居中 */
}

.stock_news_ul {
  padding: 10px;
  padding-bottom: 0;
  height: 94%;
  text-align: left;
  overflow: scroll;
  scroll-behavior: smooth;
}

.stock_news_ul::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}

.info,
.tips {
  display: flex;
  width: 100%;
  border-radius: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 11px;
  box-sizing: border-box;
  color: whitesmoke;
  margin-top: 5px;
  margin-bottom: 5px;
}

.tips {
  background: linear-gradient(
      to bottom,
      #55254a 0%,
      transparent 10%,
      transparent 90%,
      #55254a 100%
    ),
    linear-gradient(
      to right,
      #55254a 0%,
      transparent 5%,
      transparent 95%,
      #55254a 100%
    );
  border: 1px solid #a13246;
}

.info {
  background: linear-gradient(
      to bottom,
      #0e2a6c 0%,
      transparent 10%,
      transparent 90%,
      #0e2a6c 100%
    ),
    linear-gradient(
      to right,
      #0e2a6c 0%,
      transparent 5%,
      transparent 95%,
      #0e2a6c 100%
    );
  border: 1px solid rgb(28, 28, 197);
}

.news_icon {
  padding-top: 3px;
  display: block;
  width: 45px;
  height: 100%;
}

.news_content {
  display: block;
  width: calc( 100% - 45px );
}

.news_time {
  font-family: '黑体';
  font-weight: bold;
  margin-right: 10px;
  color: #ffd700;
  font-size: 18px;
}

.date_title {
  display: block;
  width: 100%;
  text-align: center;
  height: 28px;
  line-height: 28px;
  color: orange;
  border-radius: 4px;
  background-color: #06245e;
  margin-top: 5px;
  margin-bottom: 5px;
  font-weight: bold;
}
</style>
